<template>
    <div class="page">
        <v-chart class="chart" :options="options"/>
<!--        统计学历-->
        <el-row>
            <el-col :span="8">
                <div style="width: 100%;height:400px" ref="degree_chart"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import api from "@/services/api";
import * as Echarts from 'echarts'
export default {
    name: "Chart",
    data() {
        return {
            degreeChart : null,
            options:{
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            }
        }
    },
    mounted() {
        api.get('/charts/job-count').then(arr=>{
            const names = [],values = [];
            arr.forEach(item=>{
                names.push(item.name)
                values.push(item.value)
            })
            this.options.xAxis.data = names;
            this.options.series[0].data = values
        }).catch(e=>console.log(data));
        this.countDegree()
    },
    // 当组件被销毁时被调用
    destroyed() {
        if(this.degreeChart){
            // 销毁图表对象
            this.degreeChart.dispose();
        }
    },
    methods:{
        countDegree(){
            api.get('/charts/count-degree').then(data=>{
                // 判断图标是否已经被初始化 避免重复初始化
                if(this.degreeChart == null) {
                    //    初始化echarts
                    this.degreeChart = Echarts.init(this.$refs.degree_chart);
                }
                // 设置图表要显示的数据配置信息
                this.degreeChart.setOption(
                    {
                        // 标题
                        title: {
                            text: '学历统计',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        series: [
                            {
                                name: '最高学历',
                                type: 'pie',
                                data: data
                            }
                        ]
                    }
                )
            }).catch(e=>{
                this.$message.error(e.message || '统计学习失败');
            })
        }
    }
}
</script>

<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
    width: 100%;
    height: 100%;
}
</style>
